<template>
	<view v-if="pageshow">
		<!-- banner -->
		<view class="allbanner" style="position: relative;">
			<view class="bannercenter flexcolumn">
				<view class="bannerimgtext">
					<image src="@/static/image/system/f7xn.png" mode="" class=""></image>
				</view>
				<view class="bannertext3 margin_top">详情</view>
			</view>
			<image :src="topimg" mode=""></image>
		</view>
		<view class="mainpadding">
			<view class="bigtext">{{dataAll.title}}</view>
			<view class="flexright" v-if="dataAll.lsrz_status==1">
				<view class="renzhen margin_right1"></view>
				<view class="huisetext1">认证律师上传 </view>
			</view>
			<view class="flexbetween allxiahian margin_top4">
				<view class="flexleft">
					<view class="word margin_right2"></view>
					<view class="nosmalltext">{{dataAll.title}}</view>
				</view>
				<view @click="downfile">
					<u-icon name="download" v-if="downflag" color="#c89d3b" size="28"></u-icon>
					<u-icon name="download" v-if="!downflag" color="#999" size="28"></u-icon>
				</view>
			</view>
			<view class="hongsetext margin_top">*
				<text class="nosmalltext">由于小程序显示原因，实际的样式与word样式存在偏差，以实际word文件为准。</text>
			</view>
			<!-- 图片 -->
			<view class="image margin_top">
				<image :src="item" mode="widthFix" v-for="(item,index) in dataAll.images_text" @click="lbtpriview(index,dataAll.images_text)"></image>
			</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				pageshow: false,
				topimg: "",
				listid: "",
				dataAll: {},
				downflag:false
			}
		},

		onLoad(options) {
			this.topimg = options.bgimage_text
			this.listid = options.id
			this.getdetail()
		},
		methods: {
			lbtpriview(index,arr) {
				var i = this.dataAll.images_text; //获取当前页面的轮播图数据
				//uniapp预览轮播图
				uni.previewImage({
					current: index, //预览图片的下标
					urls: i //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
				})
			},
			downfile() {
				let _this = this
				uni.showLoading({
					title:"下载中",
					mask:true
				})
				this.downflag=true
				uni.downloadFile({
					url: _this.dataAll.file_text, //下载地址接口返回
					success: (data) => {
						if (data.statusCode === 200) {
							//隐藏加载框
							uni.hideLoading();
							//文件保存到本地
							uni.saveFile({
								tempFilePath: data.tempFilePath, //临时路径
								success: function(res) {
									uni.showToast({
										mask: true,
										// title: '文件已保存：' + res.savedFilePath, //保存路径
										title: '下载成功',
									});
									setTimeout(() => {
										var filePath = res.savedFilePath;
										uni.openDocument({ //新开页面打开文档，支持格式：doc, xls, ppt, pdf, docx, xlsx, pptx。
											filePath: filePath,
											showMenu: true,
											success: function(res) {}
										});
									}, 1000)
								}
							});
						}
					},
					fail: (err) => {
						this.downflag=false
						uni.hideLoading();
						uni.showToast({
							icon: 'none',
							mask: true,
							title: '文件下载失败',
						});
					},
				});
			},
			getdetail() {
				httpRequest.request('/api/index/zyfwDetail', 'GET', {
					id: this.listid
				}, false, false, true).then(res => {
					this.dataAll = res.data
					this.pageshow = true
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.image {
		width: 100%;
		height: 1463rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.hongsetext {
		color: #E60012;
		font-size: 22rpx;
		font-weight: 500;
	}

	.wodshilitu {
		margin: 20rpx auto 0;
		width: 160rpx;
		height: 224rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.yhxk {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.yinybox {
		padding: 20rpx;
		background-color: #dedede;
	}

	.sanshi {
		width: 31.33%;
	}

	.block {
		background-color: #f6f8fa;
	}

	.huisebox {
		background-color: #37474F;
		color: #fff;
		padding: 10rpx 30rpx;
	}

	.weixuanzong {
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;

		image {
			border-radius: 50%;
			width: 100%;
			height: 100%;
		}
	}

	.yixuanzong {
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;

		image {
			border-radius: 50%;
			width: 100%;
			height: 100%;
		}
	}

	.wqeizhi {
		position: absolute;
		bottom: 84rpx;
		left: 36%;
	}
</style>